
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
    <title></title>
    <link href="js/bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="js/bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css">
    <link href="css/test.css" rel="stylesheet" type="text/css">
</head>
<body style="background-color: #ecf0f5;font-family: 微软雅黑;color: #475059;min-width: 1000px;overflow: auto">
<div class="notice_main">
    <h6>首次入城车辆信息查询</h6>
    <div style="border-bottom: 1px #ccc solid;padding-bottom: 8px">
        <p style="line-height: 24px;font-size: 14px;padding: 4px 0 0 36px ;color:#bb8940;background-image: url(img/ts_03.png);background-repeat: no-repeat;background-position: 10px 8px;font-weight: bold">温馨提示</p>
        <ul class="ts">
            <li><span>*</span>该页面主要显示的是首次入城车辆信息查询的类容。</li>
        </ul>
    </div>
    <div class="notice_check" style="padding: 16px 15px 8px 15px">
        <label style="font-weight: normal">开始时间：</label>
        <input type="text" class="find_input01">
        <label style="font-weight: normal">结束时间：</label>
        <input type="text" class="find_input01">
        <label style="font-weight: normal">车牌号码：</label>
        <input type="text" class="find_input01">
        <label style="font-weight: normal">卡口名称：</label>
        <select class="find_input01">
            <option>东</option>
            <option>南</option>
            <option>西</option>
            <option>北</option>
        </select>
    </div>
    <div class="notice_check" style="padding: 16px 15px 8px 15px">
        <label style="font-weight: normal">车辆品牌：</label>
        <input type="text" class="find_input01">
        <label style="font-weight: normal">车辆类型：</label>
        <select class="find_input01">
            <option>东</option>
            <option>南</option>
            <option>西</option>
            <option>北</option>
        </select>
        <label style="font-weight: normal">车身颜色：</label>
        <select class="find_input01">
            <option>东</option>
            <option>南</option>
            <option>西</option>
            <option>北</option>
        </select>
        <label style="font-weight: normal">车子品牌：</label>
        <input type="text" class="find_input01">
        <button class="check_btn" id="but01">查询</button>
    </div>
    <h6 class="car_list">检索结果</h6>
    <p>
    <table id="table" class="table_style" style="margin: 0 auto" > </table>
    <img src="" class="imgBix"/>
    </p>
</div>
<script src="js/jquery/jQuery-2.2.0.min.js"></script>
<script src="js/bstable/js/bootstrap.min.js"></script>
<script src="js/bstable/js/bootstrap-table.js"></script>
<script src="js/bstable/js/bootstrap-table-zh-CN.min.js"></script>
<script src="js/layer_v2.1/layer/layer.js"></script>
<script type="text/javascript">
    function openTail() {
        layer.open({
            type: 2,
            title: '首次入城车辆详情信息',
            shadeClose: true,
            shade: 0.5,
            skin: 'layui-layer-rim',
            closeBtn: 1,
            area: ['80%', '510px'],
            content: 'carSearch_tail.html'
        });
    }
</script>
<script>
var imgY;
function getY(e) {
e=e||window.event;
return e.pageY||e.clientY+document.body.scrollTop;

}
function imgBig(e) {
var imgY=getY(e);
$(".imgBix").css("top",imgY);
$(".imgBix").fadeIn();
var path=$("#imgId").attr("src");
$(".imgBix").attr("src",path);




}
</script>
<script type="text/javascript">
        $(function () {
            change();
            $('#table').bootstrapTable({
                method: "get",
                striped: true,
                singleSelect: false,
                url: "json/table4.json",
                dataType: "json",
                pagination: true, //分页
                pageSize: 10,
                pageNumber: 1,
                search: false, //显示搜索框
                contentType: "application/x-www-form-urlencoded",
                queryParams:null,
                columns: [
                    {
                        checkbox: "true",
                        field: 'check',
                        align: 'center',
                        valign: 'middle'
                    }
                    ,
                    {
                        title: "车辆图片",
                        field: 'imgid',
                        align: 'center',
                        formatter: function(value,row,index){

                            return '<img  src="img/car01.png" class="table_img" onclick="imgBig()" id="imgId">';
                        }
                    },
                    {
                        title: '车牌号',
                        field: 'title',
                        align: 'center',
                        valign: 'middle'
                    },
                    {
                        title: '车牌类型',
                        field: 'type',
                        align: 'center',
                        valign: 'middle'
                    },
                    {
                        title: '车类型',
                        field: 'big',
                        align: 'center',
                        valign: 'middle'
                    },
                    {
                        title: '车品牌',
                        field: 'date',
                        align: 'center'
                    },
                    {
                        title: '车身颜色',
                        field: 'person',
                        align: 'center',
                        valign: 'middle'
                    },
                    {
                        title: '特征描述',
                        field: '',
                        align: 'center',
                        valign: 'middle'
                    },
                    {
                        title: '操作',
                        field: 'opear',
                        align: 'center',
                        formatter: function (value, row) {
                            var e = '<a  href="javascript:void(0)" title="车辆详情" onclick="addCarSearch(\'' + row.id + '\')">车辆详情</a> ';



                            return e;
                        }
                    }
                ]
            });

        });
function change(){
    $(".dropdown-menu>li").click(function(){
        $(".change").html($(this).html())
    })
}

</script>

</body>
</html>
